<template>
  <div class="login-box">
    <div class="left-content"></div>
    <div class="right-content">
      <div class="login">
        <div class="logo">
          <img src="../../assets/images/login_logo.png" alt="" />
        </div>
        <p>OA后台管理系统</p>
        <p>
          <input type="text" placeholder="用户名" v-model="ename" />
        </p>
        <p>
          <input type="password" placeholder="密码" v-model="epass" @keyup.enter="submitForm"/>
        </p>
        <p>
          <button type="button" @click="submitForm">登录</button>
          <button type="button" @click="resetForm">重置</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      ename: "",
      epass: "",
    };
  },
  methods: {
    async submitForm() {
      let { ename, epass} = this;
      try {
          //派发disptch
          let result = await this.$store.dispatch('userinfo',{ename,epass})
          //路由跳转
          this.$router.push({path:'/home'})
          this.$message.success(result)
      } catch (error) {
          this.$message.error(error)
      }
      // const result = await this.$API.reqLogin({ ename, epass });
      // if (result.status == 0) {
      //   setToken(result.token)
      //   result.token = localStorage.getItem('TOKEN')
      //   this.$message.success(result.message)
      //   this.$router.push({path:'/main'})
      // }else{
      //   this.$message.error(result.message)
      // }
    },
    resetForm() {
      this.ename = "";
      this.epass = "";
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
body {
  background: #93defe;
}
.login-box {
  width: 1100px;
  margin: 100px auto;
}
.login-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.left-content {
  background: url("../../assets/images/login-img.png") no-repeat;
  width: 500px;
  height: 440px;
}
.login {
  width: 400px;
  height: 360px;
  background: white;
  border-radius: 5px;
  text-align: center;
  position: relative;
  padding-top: 80px;
  box-sizing: border-box;
  color: #888;
}
.logo {
  width: 120px;
  height: 120px;
  background: rgb(255, 255, 255);
  border: 5px solid #93defe;
  border-radius: 50%;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  top: -60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login p {
  padding: 10px 20px;
}
.login input {
  box-sizing: border-box;
  padding: 15px 15px;
  width: 300px;
  border: 1px solid rgb(220, 222, 224);
  border-radius: 5px;
  outline: none;
}
.login button {
  border: none;
  background: rgb(39, 169, 227);
  color: rgb(255, 255, 255);
  padding: 15px 15px;
  width: 100px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  margin: 0px 20px;
}
.login button:nth-child(2) {
  background: steelblue;
}
.login button:hover {
  background: #93defe;
}
.login button:nth-child(2):hover {
  background: turquoise;
}
</style>